.prevAll()

Categories: Traversing > Tree Traversal

.prevAll( [selector ] )Returns: jQuery

Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector, in the reverse document order.

Given a jQuery object that represents a set of DOM elements, the .prevAll() method searches through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements; the elements are returned in order beginning with the closest sibling.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a simple list on it:

1
2
3
4
5
6
7
 
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

If we begin at the third item, we can find the elements which come before it:

1
 
$( "li.third-item" ).prevAll().css( "background-color", "red" );

The result of this call is a red background behind items 1 and 2. Since we do not supply a selector expression, these preceding elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.

Note: Many APIs, like append or wrapAll process node in the order in which they appear in the jQuery object. This can pose issues with APIs like .prevAll() in which the reverse document order is used. Consider the following example:

1
2
3
4
5
 
<div>
  <div>First</div>
  <div>Second</div>
  <div class="last-item">Last</div>
</div>

The following call:

1
2
3
 
$( ".last-item" )
  .prevAll()
  .wrapAll( "<div class='wrapper'></div>" );

would result in the following HTML:

1
2
3
4
5
6
7
 
<div>
  <div class="wrapper">
    <div>Second</div>
    <div>First</div>
  </div>
  <div class="last-item">Last</div>
</div>

because "Item 2" gets appended to the wrapper div first. To work around the issue, you may use .uniqueSort() on the .prevAll() output first:

1
2
3
4
 
$( ".last-item" )
  .prevAll()
  .uniqueSort()
  .wrapAll( "<div class='wrapper'></div>" );

Note that the .uniqueSort() method is only available in jQuery 3.7.0 or newer. In older versions, you will need to use $.uniqueSort() to achieve a similar effect:

1
2
3
 
var prevSiblings = $( ".last-item" ).prevAll();
$.uniqueSort( prevSiblings );
prevSiblings.wrapAll( "<div class='wrapper'></div>" );

Examples:

Locate all the divs preceding the last div and give them a class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevAll demo</title>
  <style>
  div {
    width: 70px;
    height: 70px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  div.before {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).last().prevAll().addClass( "before" );
</script>
 
</body>
</html>

Demo:

Locate all the divs preceding the last item and wrap them with a div with class wrapper - with or without .uniqueSort().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevAll demo</title>
  <style>
  body {
    display: flex;
  }
  .container {
    display: flex;
    margin: 10px 50px 10px 10px;
  }
  .wrapper {
    position: relative;
    display: flex;
    padding: 30px 10px 10px 10px;
    background: #def;
    border: 2px solid black;
  }
  .wrapper::before {
    content: attr(data-content);
    position: absolute;
    top: 15px;
    left: 15px;
  }
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    font-size: 50px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div class="container" id="container-1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
 
<div class="container" id="container-2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
 
<script>
$( "#container-1" )
  .find( ".item" )
  .last()
  .prevAll()
  .wrapAll( "<div class='wrapper' data-content='No uniqueSort'></div>" );
 
$( "#container-2" )
  .find( ".item" )
  .last()
  .prevAll()
  .uniqueSort()
  .wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
</script>
 
</body>
</html>

Demo: